
<div id="content">
    <div class="container_box" style="background-color: white; padding: 0 20px">
        <ul id="myTab" class="nav nav-tabs" style="margin: 0 -20px">
            <li class="active">
                <a href="#project" data-toggle="tab">项目信息</a>
            </li>
            <li>
                <a href="#device" data-toggle="tab">设备信息</a>
            </li>
        </ul>
        <div id="myTabContent" class="tab-content row">
            <div class="tab-pane fade in active" id="project" style=" padding: 20px">
                <h6>项目名称</h6>
                <div class="row">
                    <div class="col-sm-3">
                        <input type="text" class="form-control" ng-model="infor.name">
                        <span style="color: red; position: absolute; top: 0; right: 0">*</span>
                    </div>
                </div>

                <h6>项目编号</h6>
                <div class="row">
                    <div class="col-sm-3">
                        <input type="text" class="form-control" ng-model="infor.project_num">
                        <span style="color: red; position: absolute; top: 0; right: 0">*</span>
                    </div>
                </div>

                <h6>客户名称</h6>
                <div class="row">
                    <div class="col-sm-3">
                        <input type="text" class="form-control" ng-model="infor.clientname">
                        <span style="color: red; position: absolute; top: 0; right: 0">*</span>
                    </div>
                </div>
                <h6>项目说明</h6>
                <div class="row">
                    <div class="col-sm-4">
                        <textarea class="form-control" rows="3" ng-model="infor.des"></textarea>
                    </div>
                </div>
                <!-- 保存项目 -->
                <a class="btn btn-primary margin-top-10" ng-hide="visible" href="javascript:void (0)" ng-click="save_infor()">保存</a>
            </div>
            <!-- 设备列表start -->
            <div class="tab-pane fade" id="device" style="padding-left: 20px;padding-right: 20px;">
                <a ng-click="add_list_zu()" class="btn btn-labeled btn-default" href="javascript:void (0)" style="margin:15px 0 15px -13px">
                    <span class="btn-label"><i class="glyphicon glyphicon-plus"></i></span> 添加组
                </a>
                <div class="row new_alldev">
                    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="margin-bottom: 8px;">
                        <a class="dev_list_name_first btn">项目默认组</a>
                        <a class="dev_list_name_add btn" data-toggle="modal" data-target="#addModal" ng-click="show_addbox('0')"><i class="fa fa-plus"></i>添加设备</a>
                    </div>
                    <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12 cell" ng-repeat="dev in datas">
                        <div class="alldev_body">
                            <div class="dev_top">
                                <strong>类型：</strong>
                                <a ng-href="javascript:void(0);">{{dev.typename}}</a>
                                <strong>编号：</strong>
                                <a ng-href="javascript:void(0);">{{dev.deviceid}}</a>
                                <span class="pull-right status {{dev.class_status}}">{{dev.statusname}}</span>
                            </div>
                            <div class="dev_middle">
                                <div class="dev_middle_left" ng-click="showEditDevice(dev,'0')" style="cursor: pointer;">
                                    <img src="styles/img/project/havepic.jpg" class="img-responsive dev_img" alt="styles/img">

                                </div>
                                <div class="dev_middle_right padding-left-10">
                                    <p>
                                        <span class="span1">设备名称：</span> <span class="span2" uib-tooltip='{{dev.devicename}}' tooltip-append-to-body='true' ng-click="showEditDevice(dev,'0')" class="span2">{{dev.devicename}}</span>
                                    </p>
                                    <p>
                                        <span class="span1">客户名称：</span> <span class="span2" uib-tooltip='{{dev.clientname}}' tooltip-append-to-body='true' ng-click="showEditDevice(dev,'0')" class="span2">{{dev.clientname}}</span>
                                    </p>
                                    <p>
                                        <span class="span1">端&nbsp;&nbsp;口：</span> <span class="span2" uib-tooltip='{{dev.port}}' tooltip-append-to-body='true' ng-click="showEditDevice(dev,'0')" class="span2">{{dev.port}}</span>
                                    </p>
                                    <p>
                                        <span class="span1">位&nbsp;&nbsp;置：</span> <span class="span2" uib-tooltip='{{dev.pos}}' tooltip-append-to-body='true' ng-click="showEditDevice(dev,'0')" class="span2">{{dev.pos}}</span>
                                    </p>
                                </div>
                                <div class="dev_delete_bottom" uib-tooltip='删除该设备' ng-click="show_dev_del(dev.id)">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="row new_alldev" ng-repeat="i in list_zu">
                    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding-bottom: 10px; height: 35px">
                        <a class="dev_list_name btn" ng-click="show_hide1($index,i)" title="点击修改" style="padding: 4px 10px">{{i.name}}</a>
                        <a class="dev_list_name_add btn" title="添加设备" data-toggle="modal" data-target="#addModal" ng-click="show_addbox(i.id,$index)"><i class="fa fa-plus"></i>添加设备</a>
                        <div class="pull-left Edit_list_name">
                            <input type="text" class="ipt_name">
                            <i class="fa fa-check-circle sure_name" style="color: rgba(0,114,0,0.76);" ng-click="show_hide2($index,i)"></i>
                            <i class="fa fa-times-circle no_name" style="color: #a31900;" ng-click="show_hide3($index)"></i>
                        </div>
                       <!-- <i class="fa fa-sort pull-right btn_sort" ng-click="show_hide($index,i)" title="显示数据">展开</i>-->
                        <span class="pull-right dev_open_zu" title="展开" ng-click="show_hide($index,i)">展开</span>
                        <span class="pull-right dev_delete_zu" title="删除" ng-click="delete_zu(i)">删除</span>
                    </div>
                    <div class="dev_list_content">
                        <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12 cell" ng-repeat="dev in datas_children">
                            <div class="alldev_body">
                                <div class="dev_top">
                                    <strong>类型：</strong>
                                    <a ng-href="javascript:void(0);">{{dev.typename}}</a>
                                    <strong>编号：</strong>
                                    <a ng-href="javascript:void(0);">{{dev.deviceid}}</a>
                                    <span class="pull-right status {{dev.class_status}}">{{dev.statusname}}</span>
                                </div>
                                <div class="dev_middle">
                                    <div class="dev_middle_left" ng-click="showEditDevice(dev,i.id)" style="cursor: pointer;">
                                        <img src="styles/img/project/havepic.jpg" class="img-responsive dev_img" alt="styles/img">

                                    </div>
                                    <div class="dev_middle_right padding-left-10">
                                        <p>
                                            <span class="span1">设备名称：</span> <span uib-tooltip='{{dev.devicename}}' tooltip-append-to-body='true' ng-click="showEditDevice(dev,i.id)" class="span2">{{dev.devicename}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">客户名称：</span> <span class="span2" uib-tooltip='{{dev.clientname}}' tooltip-append-to-body='true' ng-click="showEditDevice(dev,i.id)">{{dev.clientname}}</span>

                                        </p>
                                        <p>
                                            <span class="span1">端&nbsp;&nbsp;口：</span> <span class="span2" uib-tooltip='{{dev.port}}' tooltip-append-to-body='true' ng-click="showEditDevice(dev,i.id)">{{dev.port}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">位&nbsp;&nbsp;置：</span> <span class="span2" uib-tooltip='{{dev.pos}}' tooltip-append-to-body='true' ng-click="showEditDevice(dev,i.id)">{{dev.pos}}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="dev_delete_bottom" uib-tooltip='删除该设备' ng-click="show_dev_del(dev.id)">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!--<div class="row new_alldev">
                    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12" style="padding-bottom: 10px; border-bottom: 1px solid #8b8482; height: 35px">
                        <span class="dev_list_name">第二个组</span>
                        <div class="pull-left Edit_list_name">
                            <input type="text" class="ipt_name">
                            <i class="fa fa-check-circle sure_name" style="color: rgba(0,114,0,0.76);"></i>
                            <i class="fa fa-times-circle no_name" style="color: #a31900;"></i>
                        </div>
                        <i class="fa fa-angle-double-down pull-right btn_sort"></i>
                    </div>
                    <div class="dev_list_content" style="display: none">
                        <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12 cell" ng-repeat="dev in datas">
                            <div class="alldev_body">
                                <div class="dev_top">
                                    <a ng-href="javascript:void(0);">{{dev.typename}}</a>
                                    <a ng-href="javascript:void(0);">{{dev.deviceid}}</a>
                                    <span class="pull-right status {{dev.class_status}}">{{dev.statusname}}</span>
                                </div>
                                <div class="dev_middle">
                                    <div class="dev_middle_left" ng-click="showEditDevice(dev)" style="cursor: pointer;">
                                        <img src="styles/img/project/havepic.jpg" class="img-responsive dev_img" alt="styles/img">

                                    </div>
                                    <div class="dev_middle_right padding-left-10">
                                        <p>
                                            <span class="span1">设备名称：</span> <span>{{dev.devicename}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">客户名称：</span> <span>{{dev.clientname}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">端口：</span> <span>{{dev.port}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">位置：</span> <span>{{dev.pos}}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12 cell" ng-repeat="dev in datas">
                            <div class="alldev_body">
                                <div class="dev_top">
                                    <a ng-href="javascript:void(0);">{{dev.typename}}</a>
                                    <a ng-href="javascript:void(0);">{{dev.deviceid}}</a>
                                    <span class="pull-right status {{dev.class_status}}">{{dev.statusname}}</span>
                                </div>
                                <div class="dev_middle">
                                    <div class="dev_middle_left" ng-click="showEditDevice(dev)" style="cursor: pointer;">
                                        <img src="styles/img/project/havepic.jpg" class="img-responsive dev_img" alt="styles/img">

                                    </div>
                                    <div class="dev_middle_right padding-left-10">
                                        <p>
                                            <span class="span1">设备名称：</span> <span>{{dev.devicename}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">客户名称：</span> <span>{{dev.clientname}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">端口：</span> <span>{{dev.port}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">位置：</span> <span>{{dev.pos}}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 col-lg-4 col-sm-6 col-xs-12 cell" ng-repeat="dev in datas">
                            <div class="alldev_body">
                                <div class="dev_top">
                                    <a ng-href="javascript:void(0);">{{dev.typename}}</a>
                                    <a ng-href="javascript:void(0);">{{dev.deviceid}}</a>
                                    <span class="pull-right status {{dev.class_status}}">{{dev.statusname}}</span>
                                </div>
                                <div class="dev_middle">
                                    <div class="dev_middle_left" ng-click="showEditDevice(dev)" style="cursor: pointer;">
                                        <img src="styles/img/project/havepic.jpg" class="img-responsive dev_img" alt="styles/img">

                                    </div>
                                    <div class="dev_middle_right padding-left-10">
                                        <p>
                                            <span class="span1">设备名称：</span> <span>{{dev.devicename}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">客户名称：</span> <span>{{dev.clientname}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">端口：</span> <span>{{dev.port}}</span>
                                        </p>
                                        <p>
                                            <span class="span1">位置：</span> <span>{{dev.pos}}</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dev_jiazai" style="margin-bottom: 10px;">
                    <a ng-click="jiazai_more()">
                        <span>加载更多...</span>
                    </a>
                </div>-->
            </div>
            <!-- 设备列表end -->
        </div>
    </div>


    <!-- 新建设备 -->
    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">添加设备</h4>
                </div>
                <div class="modal-body">
                    <form id="smart-form-register" class="smart-form" data-smart-registration-form ng-submit="insertdata()">
                        <fieldset class="row" style="padding-top: 5px;">
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">客户名称</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.clientname">
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备类型</label>
                                <label class="select">
                                    <select ng-model="insert.type" class="form-control">
                                        <option value="{{ty.id}}" ng-repeat = "ty in types">{{ty.name}}</option>
                                    </select>
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备名称</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.devicename">
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备号</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.deviceid">
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">端口号</label>
                                <label class="input">
                                    <select ng-model="insert.port" class="form-control">
                                        <option value="{{port_obj.port}}" ng-repeat = "port_obj in ports">{{port_obj.port}}</option>
                                    </select>
                                    <span style="color: red; position: absolute; top: 0; right: -10px">*</span>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">所属区域</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.zone">
                                    <!-- <span style="color: red; position: absolute; top: 0; right: -10px">*</span> -->
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">地理位置</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="insert.pos">
                                    <!-- <span style="color: red; position: absolute; top: 0; right: -10px">*</span> -->
                                </label>
                            </section>


                        </fieldset>

                        <footer>

                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="submit" class="btn btn-primary">
                                提交
                            </button>

                        </footer>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- 编辑设备 -->
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">编辑设备</h4>
                </div>
                <div class="modal-body">

                    <form id="smart-form-register" class="smart-form" data-smart-registration-form ng-submit="updatedata()">
                        <fieldset class="row" style="padding-top: 5px;">
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">客户名称</label>
                                <label class="input">
                                    <input type="text" ng-model="editdata.clientname">
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备类型</label>
                                <label class="select">
                                    <select ng-model="editdata.type" class="form-control">
                                        <option value="{{ty.id}}" ng-repeat = "ty in types">{{ty.name}}</option>
                                    </select>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备名称</label>
                                <label class="input">
                                    <input type="text" ng-model="editdata.devicename">
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">设备号</label>
                                <label class="input">
                                    <input type="text" ng-model="editdata.deviceid" disabled="disabled">
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">端口号</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="editdata.port" disabled>
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">所属区域</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="editdata.zone">
                                </label>
                            </section>
                            <section class="col-sm-5" style="margin: 0 20px 15px;">
                                <label class="label">地理位置</label>
                                <label class="input">
                                    <input type="text" maxlength="50" ng-model="editdata.pos">
                                </label>
                            </section>


                        </fieldset>

                        <footer>
                            <button type="button" class="btn btn-default" data-dismiss="modal">
                                关闭
                            </button>
                            <button type="submit" class="btn btn-primary">
                                提交
                            </button>

                        </footer>
                    </form>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!-- 删除组弹窗 -->
    <div class="modal fade" id="showDelDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title">信息</h4>
                </div>
                <div class="modal-body">
                    <p>
                        您确实要删除这个组吗？
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" ng-click="delete_zu_sure()">
                        删除
                    </button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div>
    <!-- 删除设备弹窗 -->
    <div class="modal fade" id="showdev" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title">信息</h4>
                </div>
                <div class="modal-body">
                    <p>
                        您确实要删除这个设备吗？
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        关闭
                    </button>
                    <button type="button" class="btn btn-primary" ng-click="deldevice()">
                        删除
                    </button>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
